<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>救赎之道</title>
    <style>
        body {
            width: 250px;
            padding: 15px;
            font-family: 'Microsoft YaHei', Arial, sans-serif;
        }
        h3 {
            margin-top: 0;
            color: #4CAF50;
            text-align: center;
        }
        .upload-area {
            border: 2px dashed #ccc;
            padding: 20px;
            text-align: center;
            cursor: pointer;
            margin-bottom: 15px;
            transition: background-color 0.3s;
        }
        .upload-area:hover {
            background-color: #f9f9f9;
        }
        .upload-area input {
            display: none;
        }
        .settings {
            margin-top: 15px;
        }
        .setting-item {
            margin-bottom: 10px;
        }
        .setting-item label {
            display: block;
            margin-bottom: 5px;
        }
        .setting-item input[type="range"] {
            width: 100%;
        }
        .setting-item input[type="text"] {
            width: calc(100% - 10px);
            padding: 5px;
        }
        .info {
            font-size: 12px;
            color: #666;
            margin-top: 10px;
        }
        .tips {
            font-size: 11px;
            color: #888;
            margin-top: 10px;
            border-top: 1px solid #eee;
            padding-top: 10px;
        }
    </style>
</head>
<body>
    <h3>救赎之道，就在其中</h3>
    
    <div class="upload-area" id="uploadArea">
        <p>点击或拖拽TXT文件到此处</p>
        <input type="file" id="fileInput" accept=".txt">
    </div>
    
    <div class="settings">
        <div class="setting-item">
            <label for="fontSize">字体大小: <span id="fontSizeValue">14px</span></label>
            <input type="range" id="fontSize" min="10" max="24" value="14">
        </div>
        
        <div class="setting-item">
            <label for="lineHeight">行高: <span id="lineHeightValue">1.5</span></label>
            <input type="range" id="lineHeight" min="1.0" max="3.0" step="0.1" value="1.5">
        </div>
        
        <div class="setting-item">
            <label for="fontColor">字体颜色: <span id="fontColorValue">#333333</span></label>
            <input type="color" id="fontColor" value="#333333">
        </div>
        
        <div class="setting-item">
            <label for="hotkeyNext">下一页快捷键: <small>(Ctrl+Shift+Right 或单键)</small></label>
            <input type="text" id="hotkeyNext" value="Ctrl+Shift+Right" placeholder="例如: Ctrl+Shift+Right">
        </div>
        
        <div class="setting-item">
            <label for="hotkeyPrev">上一页快捷键: <small>(Ctrl+Shift+Left 或单键)</small></label>
            <input type="text" id="hotkeyPrev" value="Ctrl+Shift+Left" placeholder="例如: Ctrl+Shift+Left">
        </div>
        
        <div class="setting-item">
            <label for="windowLength">显示字数: <span id="windowLengthValue">60</span> 字</label>
            <input type="number" id="windowLength" min="20" max="200" value="60" style="width: calc(100% - 10px); padding: 5px;">
        </div>
    </div>
    
    <!-- 页码跳转功能 -->
    <div class="page-navigation" style="margin-top: 15px; padding-top: 10px;">
        <div class="setting-item">
            <label for="currentPage">页码: <span id="pageDisplay">0/0</span></label>
            <input type="number" id="currentPage" min="1" value="1" style="width: calc(100% - 10px); padding: 5px;">
            <button id="goToPageBtn" style="width: 100%; margin-top: 5px; padding: 5px; background-color: #4CAF50; color: white; border: none; border-radius: 3px; cursor: pointer;">
                跳转
            </button>
        </div>
    </div>
    
    <div class="info" id="fileInfo"></div>
    
    <div class="tips">
        <p>💡 使用说明：</p>
        <p>- 上传TXT文件后，在网页上会显示一行隐蔽的内容</p>
        <p>- 使用键盘快捷键进行翻页</p>
        <p>- 可调整字体大小、透明度等参数增强隐蔽性</p>
        <p>- TXT编码格式要求为UTF-8</p>
        <p>- 刷新页面浮窗默认位置在浏览器左下角</p>
    </div>

    <script src="popup.js"></script>
</body>
</html>